<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/datatables.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
    <style type="text/css">
        #getVerifyCode{cursor: pointer; outline: none;}
        .alert,.alert2,.alert3 {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 200px;
            margin-left: -100px;
            z-index: 99999;
            padding: 15px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-success {
            color: green ;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-info {
            color: red;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
    </style>
</head>
<body style="background-color:whitesmoke">
<div id="admin">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>预定管理</h2>
        <ol class="breadcrumb">
            <li>
                <strong>预定管理</strong>
            </li>
            <li class="active">
                <strong>预定桌位</strong>
            </li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="ibox-content m-b-sm border-bottom">
        <div class="row">
            <form role="form" class="form-horizontal">
                <div class="form-group">

                    <label class=" col-sm-1 control-label">桌号</label>
                    <div class=" col-sm-2">
                        <input type="text" class="form-control" v-model="adminQuery.tablessId" placeholder="请输入桌号">
                    </div>
                    <label class=" col-sm-1 control-label">几人做</label>
                    <div class=" col-sm-2">
                        <input type="text" class="form-control" v-model="adminQuery.tablesssNum" placeholder="请输入几人做">
                    </div>
                    <label class=" col-sm-1 control-label">状态</label>
                    <div class=" col-sm-2">
                        <input type="text" class="form-control" v-model="adminQuery.tablessState" placeholder="请输入状态">
                    </div>

                    <div>
                        <button class="btn btn-primary btn-sm" type="button"  @click="loadData()"><span class="glyphicon glyphicon-zoom-in" ></span> 查询</button>
                        <button class="btn btn-primary btn-sm" type="button" @click="add()"><span class="glyphicon glyphicon-plus"></span> 新增</button>
                    </div>
                </div>
            </form>

        </div>

    </div>
    <div class="row">
        <div class="col-lg-12">

            <div class="ibox float-e-margins">

                <div class="ibox-content">

                    <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                        <thead>
                        <tr>

                            <th data-toggle="true">桌号</th>
                            <th data-hide="all">几人座</th>
                            <th data-hide="phone">桌位状态</th>
                            <th  data-sort-ignore="true">操作</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="x in list">
                            <td>{{x.tablessId}}</td>
                            <td>{{x.tablesssNum}}</td>
                            <td>{{x.tablessState}}</td>
                            <td >
                                <button class="btn-primary btn btn-sm" @click="update(x)"><span class="glyphicon glyphicon-tag"></span> 修改</button>
                                <button class="btn-primary btn btn-sm" @click="del(x)"><span class="glyphicon glyphicon-tag"></span> 删除</button>
                              
                                <button class="btn-primary btn btn-sm"  @click="addcai(x)"><span class="glyphicon glyphicon-trash"></span> 点菜</button>
                                <button class="btn-primary btn btn-sm"  @click="checkOutopen(x)"><span class="glyphicon glyphicon-trash"></span>结账</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <div>
                        一共{{total}}条数据,一共{{totalPage}}页,当前第{{curPage}}页
                        <button class="btn btn-success btn-sm" type="button" @click="prePages()">上一页</button>
                        <button class="btn btn-success btn-sm" type="button" @click="nextPages()">下一页</button>
                        <button class="btn btn-success btn-sm" type="button" @click="indexPage()">首页</button>
                        <button class="btn btn-success btn-sm" type="button" @click="endPage()">尾页</button>
                        跳转到<input type="text" id="num" style="width: 40px" v-model="selectPage" @keyup="valNum">页
                        <button class="btn btn-success btn-sm" type="button" @click="changePage()">跳转</button>
                        <select v-model="adminQuery.row" @change="selectRow" >
                            <option value="3">每页3条</option>
                            <option value="5">每页5条</option>
                            <option value="10">每页10条</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新增模态框 -->
<div id="one" class="modal fade" style="top:200px">
    <div class="modal-dialog">

        <div class="modal-content">
            <!--头部-->
            <div class="modal-header">
                <h4 align="center">{{title}}</h4>

            </div>
            <!--主题内容-->
            <div class="modal-body">
                <form role="form" class="form-horizontal">

                    <div class="form-group">
                        <label class=" col-sm-2 control-label">几人座</label>
                        <div class=" col-sm-10">
                            <input type="text" class="form-control" v-model="table.tablesssNum"  placeholder="请输入几人座">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class=" col-sm-2 control-label">桌位状态</label>
                        <div class=" col-sm-10">
                            <select v-model="table.tablessState">
                                <option selected="selected">空</option>
                                <option>早</option>
                                <option>中</option>
                                <option>晚</option>
                                <option>有人</option>
                            </select>
<!--                            <input type="text" class="form-control" v-model="table.tablessState"  placeholder="请输入桌位状态">-->
                        </div>
                    </div>

                </form>
            </div>

            <!--底部-->
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm" type="button" @click="closeWin()"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                <button class="btn btn-primary btn-sm"  @click="saveAdmin"><span class="glyphicon glyphicon-save"   ></span>保存</button>
            </div>

        </div>
    </div>
</div>

    <!-- 预定模态框 -->
    <div id="two" class="modal fade" style="top:200px">
        <div class="modal-dialog">

            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <h4 align="center">{{title}}</h4>

                </div>
                <!--主题内容-->
                <div class="modal-body">
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class=" col-sm-2 control-label">预定桌号</label>
                            <div class=" col-sm-10">
                                <input type="text" readonly="readonly" class="form-control" v-model="table.tablessId"  placeholder="请输入桌号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" col-sm-2 control-label">几人做</label>
                            <div class=" col-sm-10">
                                <input type="text" readonly="readonly" class="form-control" v-model="table.tablesssNum"  placeholder="请输入几人座">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" col-sm-2 control-label">姓名</label>
                            <div class=" col-sm-10">
                                <input type="text" class="form-control" v-model="table.ydName"  placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" col-sm-2 control-label">电话</label>
                            <div class=" col-sm-10">
                                <input type="text" class="form-control" v-model="table.ydPhone"  placeholder="请输入电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" col-sm-2 control-label">预定人数</label>
                            <div class=" col-sm-10">
                                <input type="text" class="form-control" v-model="table.ydNum"  placeholder="请输入预定人数">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class=" col-sm-2 control-label">桌位状态</label>
                            <div class=" col-sm-10">
                                <select v-model="table.tablessState">
                                    <option selected="selected">早</option>
                                    <option>中</option>
                                    <option>晚</option>
                                </select>
                                <!--                            <input type="text" class="form-control" v-model="table.tablessState"  placeholder="请输入桌位状态">-->
                            </div>
                        </div>

                    </form>
                </div>

                <!--底部-->
                <div class="modal-footer">
                    <button class="btn btn-primary btn-sm" type="button" @click="closeWin()"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                    <button class="btn btn-primary btn-sm"  @click="saveAdmin"><span class="glyphicon glyphicon-save"   ></span>预定</button>
                </div>

            </div>
        </div>
    </div>

    <!-- 菜单模态框 -->

    <div id="three" class="modal fade" style="top:200px">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="alert"></div>

                <!--头部-->
                <div class="modal-header">
                    <h4 align="center">{{title}}</h4>

                </div>
                <!--主题内容-->
                <div class="modal-body">
                    <div class="col-lg-12">

                        <div class="ibox float-e-margins">

                            <div class="ibox-content">

                                <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                    <thead>
                                    <tr>

                                        <th data-toggle="true">编号</th>
                                        <th data-hide="all">种类</th>
                                        <th data-hide="phone">名称</th>
                                        <th data-hide="phone">价格</th>
                                        <th data-hide="phone">数量</th>
                                        <th  data-sort-ignore="true">操作</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="x in cailist">
                                        <td>{{x.menuId}}</td>
                                        <td>{{x.category.categoryName}}</td>
                                        <td>{{x.menuName}}</td>
                                        <td>{{x.menuMoney}}</td>
                                        <td><input style="width: 40px" v-bind:id="'num'+x.menuId" value="1" placeholder="请输入数量" @keyup="caiNum(x)" > </td>
                                        <td >
                                            <button class="btn-primary btn btn-sm"  @click="incaidan(x)"><span class="glyphicon glyphicon-plus"></span> 加入菜单</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <button class="btn btn-info btn-sm"  @click="menulist()"><span class="glyphicon glyphicon-save"></span>菜单</button>
                <!--底部-->
                <div class="modal-footer">
                    <button class="btn btn-primary btn-sm" type="button" @click="closeWin()"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                </div>

            </div>
        </div>
    </div>
<!--显示菜单-->

    <!-- Modal -->
    <div class="alert2"></div>
    <div id="four"   class="modal fade"  data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" style="right: 20%;top: 30%;width: 500px">
        <div class="modal-dialog" style="width: 450px">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">菜单</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                        <thead>
                        <tr>
                            <th data-toggle="true">编号</th>
                            <th data-toggle="true">菜名</th>
                            <th data-hide="all">数量</th>
                            <th  data-sort-ignore="true">操作</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="x in tablecailist">
                            <td>{{menus.tablessId}}</td>
                            <td>{{x.menuName}}</td>
                            <td>
                                <span @click="cailistnum(x,'-')">-</span>
                                <input :id="x.menuName" style="border-radius:9px;width: 60px;" v-bind:value="x.menNum" @keyup="updatemenNum(x)">
                                <span @click="cailistnum(x,'+')">+</span>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm"  @click="cailistdel(x)"><span class="glyphicon glyphicon-save"   ></span>删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>


                </div>
                <div class="modal-footer">
                    <button type="button"  @click="subcailist" class="btn btn-primary">下单</button>
                    <button type="button" @click="closeWincai()" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

<!--    结账模态框-->
    <div class="alert3"></div>
    <div id="five" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
<!--                模态框头部-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">结账</h4>
                </div>
<!--                模态框内容-->
                <div class="modal-body">
                    <label>会员号</label>
                    <input placeholder="请输入会员号" v-model="vipnum">  <button class="btn btn-success" @click="vipdate()" >确认</button>
                    <div style="overflow-y: scroll;height: 200px;width: 400px;border: 1px solid black;">
                        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                            <thead>
                            <tr>
                                <th>菜名</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>需支付</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="x in tablecailist">
                                <td>{{x.menuName}}</td>
                                <td>{{x.menuMoney}}</td>
                                <td>{{x.menNum}}</td>
                                <td>{{x.amount}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <label>您的会员等级是：{{vipGrade}}</label><br/>
                    <label>折扣是：{{discount}}</label><br/>
                    <label style="color: red">总金额：{{amountall}}</label><br/>
                    <label style="color: blue">需支付：{{actualmoney}}</label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <span v-if="amountall == 0">
                        <button type="button" @click="checkOut()" class="btn btn-primary" disabled>结账</button>
                    </span>
                    <span v-else>
                        <button type="button" @click="checkOut()" class="btn btn-primary">结账</button>
                    </span>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
</body>

<script>

    new Vue({
        el:"#admin",
        data:{
            list:[],
            cailist:[],
            tablecailist:[],
            amountall:0,   //总金额
            vipnum:"",    //会员号
            actualmoney:0,   //需支付金额
            vipGrade:"空",   //VIP等级
            discount:1.0,   //折扣
            vips:{
                tablemenus:"",  //座号
                amountall:0,   //总金额
                vipnum:"",    //会员号
                actualmoney:0,   //需支付金额
                vipGrade:"空",   //VIP等级
                discount:1.0   //折扣
            },
            total:0,//总条数
            totalPage:0,//总页数
            selectPage:1,//选择页数
            adminQuery:{ //查询对象
                page:1,
                row:3,
                tablessId:null,
                tablessState:'',
                tablesssNum:null
            },
            prePage:0,//上一页
            nextPage:0,//下一页.
            curPage:0,//当前页
            table:{
                tablessId:0,
                tablessState:"",
                tablesssNum:null,
                ydName:"",
                ydPhone:"",
                ydNum:1
            },
            title:"用户修改",
            userStates:"",
            menus:{
                tablessId:0,
                menuId:0,   //菜品编号
                menuName:"",  //菜品名字
                menuMoney:0,        //菜品单价
                categoryName:"",        //菜品种类
                menNum:0,        //菜品数量
                tablessState:""
            }
        },
        methods:{
            loadData:function () {
                var self = this;
                $.ajax({
                    url:"http://192.168.7.36:2021/login-manages/tabless/tablessList",//请求地址
                    type:"get",
                    data:self.adminQuery,
                    dataType:"json",//返回的数据类型
                    success:function (data) {
                        console.log(data);
                        self.list = data.list;
                        self.total = data.total;
                        self.totalPage = data.totalPage;
                        self.prePage = data.prePage;
                        self.nextPage = data.nextPage;
                        self.curPage = data.curPage;
                    }

                })
            },
            prePages:function () {//上一页
                this.adminQuery.page = this.prePage;
                //刷新
                this.loadData();

            },
            nextPages:function () {
                this.adminQuery.page = this.nextPage;
                //刷新
                this.loadData();

            },
            indexPage:function () {//首页
                this.adminQuery.page = 1
                //刷新
                this.loadData();

            },
            endPage:function () {//尾页
                this.adminQuery.page = this.totalPage;
                //刷新
                this.loadData();

            },
            changePage:function () {//跳转
                if(this.selectPage>this.totalPage){
                    this.adminQuery.page = this.totalPage;
                }else{
                    this.adminQuery.page = this.selectPage;
                }
                //刷新
                this.loadData();

            },
            selectRow:function () {//选择条数
                this.adminQuery.page=1
                //刷新
                this.loadData();

            },
            valNum:function () {
                //定义正则表达式对象
                var dd =/^[\u4e00-\u9fa5]{0,}$/
                //如果输入的汉字，就显示1
               if(dd.test(this.selectPage)) {
                   this.selectPage=1
               }else{
                   console.log("=="+this.selectPage)
                   //如果输入的值大于总页数，就回到最大值
                   if(this.selectPage>this.totalPage){
                       this.selectPage = this.totalPage;
                   }
               }


            },
            caiNum:function(x){
                //定义正则表达式对象
                var dd =/\D/;   //非数字
                var ids = x.menuId;
                var one = $(eval("num"+ids));   //JQuery如何获得拼接id时，基本都是使用了 eval（）<方法：
                var id = one.val();
                if(dd.test(id)){
                    one.val(1);
                }
            },
            update:function(x) {//打开修改模态框
                //数据回显
                this.table.tablessState = x.tablessState;
                this.table.tablesssNum = x.tablesssNum;
                this.table.tablessId = x.tablessId;
                this.title="用户修改";
                $("#one").modal("show")

            },
            add :function () {//打开新增模态框
                $("#one").modal("show")
                this.title="用户新增";
                //清空
                this.table.tablessId=null;
                this.table.tablessState="";
                this.table.tablesssNum=""
            },
            saveAdmin:function () {//保存
                var url="";
                if(this.title=="用户新增"){
                    url="http://192.168.7.36:2021/login-manages/tabless/add";
                }else if(this.title=="用户修改"){
                    url="http://192.168.7.36:2021/login-manages/tabless/update";
                }else if (this.title=="预定桌位"){
                    url="http://192.168.7.36:2021/login-manages/tabless/yuding";
                }
                var self = this;
                console.log(url);
                $.ajax({
                    url:url,
                    type:"post",
                    contentType:"application/x-www-form-urlencoded",
                    data:self.table,
                    dataType:"json",
                    success:function (data) {
                        console.log(data);
                        alert(data.info);
                        if(data.info=="保存成功"){
                            //关闭模态框
                            $("#one").modal("hide")
                            $("#two").modal("hide")
                            //刷新
                            self.loadData();
                        }
                    }


                })

            },
            closeWin:function () {//关闭模态框
                $("#one").modal("hide")
                $("#two").modal("hide")
                $("#three").modal("hide")
                this.loadData();
            },
            closeWincai:function(){
                $("#four").modal("hide")
            },
            del:function (x) {
                var flag = confirm("确定要删除吗？");
                if(flag){
                    var self = this;
                    $.ajax({
                        url:"http://192.168.7.36:2021/login-manages/tabless/del",
                        data:x,
                        type:"get",
                        dataType: "json",
                        success:function (data) {
                            console.log(data);
                            alert(data.info);
                            if(data.info=="保存成功"){
                                //刷新
                                self.adminQuery.page = 1;
                                self.loadData();
                            }
                        }
                    })
                }
            },
            yuding:function (x) {     //预定
                if(x.tablessState == "空"){
                    $("#two").modal("show")
                    this.title="预定桌位";
                    this.table.tablessId = x.tablessId;
                    this.table.ydName = "";
                    this.table.ydPhone = "";
                    this.table.tablessState = "";
                    this.table.tablesssNum = x.tablesssNum;
                    this.ydNum=0;
                }else {
                    alert("这一桌已经被人预定了！");
                }

            },
                addcai:function (x) {  //点菜
                    this.cailoadData(x);   //获得菜单模态框的数据
                    this.title="点菜";
                    this.menus.tablessState = x.tablessState;
                    this.menus.tablessId = x.tablessId;
                    $("#three").modal("show");//打开点菜模态框

            },
            cailoadData:function () {  //展示菜单
                var salf = this;
                $.ajax({
                    url:"http://192.168.7.36:2021/login-manages/tabless/diancai",
                    type:"post",
                    contentType:"application/x-www-form-urlencoded",
                    data:salf.table,
                    dataType:"json",
                    success:function (data) {
                        console.log(data);
                        salf.cailist = data.list;
                        $("#three").modal("show");
                    }
                })
            },
            incomes:function (x) {    //客人到了
                var flag = confirm("客人到了吗？");
                if(x.tablessState!="有人") {
                    if (flag) {
                        this.title = "用户修改"
                        this.table.tablessId = x.tablessId;
                        this.table.tablessState = "有人";
                        this.saveAdmin();
                    }
                }
            },
            incaidan:function (x) {   //加入菜单
                //给VUE中的menus属性赋值
                var self = this;
                var ids = x.menuId;
                var number = $(eval("num"+ids)).val();
                self.menus.menuId = x.menuId;
                self.menus.menuName = x.menuName;
                self.menus.menuMoney = x.menuMoney;
                self.menus.categoryName = x.category.categoryName;
                console.log(number);
                self.menus.menNum = number;
                //判断厂库数量是否足够,若足够添加到redis中，不够返回一个信息
                $.ajax({
                    url:"http://192.168.7.36:2021/login-manages/menu/incaidan",
                    type:"post",
                    contentType:"application/x-www-form-urlencoded",
                    data:self.menus,
                    dataType:"json",
                    success:function (data) {
                        console.log(data.info);
                        console.log(self.menus);
                        console.log(self.table);
                        selfs = self;
                        if(data.info=="原料足够"){
                            $.ajax({
                                url:"http://192.168.7.36:2021/login-manages/tabless/addcaidan",
                                type:"post",
                                data: self.menus,
                                contentType:"application/x-www-form-urlencoded",
                                dataType:"json",
                                success:function (data) {
                                    $('.alert').html('加菜成功').addClass('alert-success').show().delay(500).fadeOut();
                                }
                            })
                        }else {
                            $('.alert').html('原料不足').addClass('alert-info').show().delay(500).fadeOut();
                        }
                    }
                })
            },
            menulist:function () {  //显示当前桌的菜单
                var self = this;
                this.title = "菜单";
                var tablemenus =  "tableyd:list"+self.menus.tablessId;
                console.log(tablemenus);
                self.menulistajax(tablemenus);
            },
            menulistajax:function(tablemenus){
                var self = this;
                $.ajax({
                    url:"http://192.168.7.36:2021/login-manages/tabless/showcailist",
                    type:"post",
                    data: {"tablemenus":tablemenus},
                    contentType:"application/x-www-form-urlencoded",
                    dataType:"json",
                    success:function (data) {
                        if(data.info=="暂时无菜品，请添加菜品"){
                            $('.alert').html('暂时无菜品，请添加菜品').addClass('alert-info').show().delay(500).fadeOut();
                        }else {
                            self.tablecailist = data.list;
                            self.amountall = 0;
                            for(var one of self.tablecailist){
                                self.amountall = self.amountall + one.amount;
                            }
                            self.actualmoney = self.amountall;
                            console.log(self.amountall);
                            $("#four").modal("show");
                        }
                    }
                })
            },
            menulistajaxs:function(tablemenus){
                var self = this;
                $.ajax({
                    url:"http://192.168.7.36:2021/login-manages/tabless/showcailist",
                    type:"post",
                    data: {"tablemenus":tablemenus},
                    contentType:"application/x-www-form-urlencoded",
                    dataType:"json",
                    success:function (data) {
                        if(data.info=="暂时无菜品，请添加菜品"){
                            $('.alert').html('暂时无菜品，请添加菜品').addClass('alert-info').show().delay(500).fadeOut();
                        }else {
                            self.tablecailist = data.list;
                            self.amountall = 0;
                            for(var one of self.tablecailist){
                                self.amountall = self.amountall + one.amount;
                            }
                            self.actualmoney = self.amountall;
                            console.log(self.amountall);
                        }
                    }
                })
            },
            cailistnum:function (x,flag) {
                var one = $("#"+x.menuName).val();
                var self = this;
                var tablemenus = "tableyd:list"+self.menus.tablessId;
                var menuName = x.menuName;
                if(one<=1&&flag == '-'){

                }else{
                    $.ajax({
                        url:"http://192.168.7.36:2021/login-manages/tabless/cailistnum",
                        type:"post",
                        data:{"flag":flag,"tablemenus":tablemenus,"menuName":menuName,"number":one},
                        contentType:"application/x-www-form-urlencoded",
                        dataType:"json",
                        success:function (data) {
                            if(data.info == "保存成功"){
                                $("#"+x.menuName).val(data.num);
                            }
                        }
                    })
                }
            },
            updatemenNum:function (x) {
                //定义正则表达式对象
                var dd =/\D/;   //非数字
                var one = $("#"+x.menuName);
                var num = $("#"+x.menuName).val();   //菜的数量
                var menuName = x.menuName;    //菜名，是map集合中的键名
                var self = this;
                var tablemenus = "tableyd:list"+self.menus.tablessId;   //redis中的键名
                if(dd.test(num)){  //有一个非数字的
                    one.val(x.menNum);
                }else {
                    $.ajax({
                        url:"http://192.168.7.36:2021/login-manages/tabless/updatemenNum",
                        type:"post",
                        data:{"tablemenus":tablemenus,"menuName":menuName,"number":num},
                        contentType:"application/x-www-form-urlencoded",
                        dataType:"json",
                        success:function (data) {
                            if(data.info == "保存成功"){
                                self.menulist();
                                console.log("保存成功------------");
                            }
                        }
                    })
                }
            },
            cailistdel:function (x) {
                var flag = confirm("确定要删除吗？");
                var self = this;
                if(flag){
                    var tablemenus = "tableyd:list"+self.menus.tablessId;   //redis中的键名
                    var menuName = x.menuName;    //菜名，是map集合中的键名
                    $.ajax({
                        url:"http://192.168.7.36:2021/login-manages/tabless/cailistdel",
                        type:"post",
                        data:{"tablemenus":tablemenus,"menuName":menuName},
                        contentType:"application/x-www-form-urlencoded",
                        dataType:"json",
                        success:function (data) {
                            if(data.info == "保存成功"){
                                console.log("删除成功");
                                alert("删除成功")
                                self.menulist();
                            }
                        }
                    })
                }

            },
            subcailist:function () {   //提交订单
                var flag = confirm("确定要下单吗？");
                var self = this;
                if(flag){
                    var tablemenus = "tableyd:list"+self.menus.tablessId;   //redis中的键名
                    $.ajax({
                        url:"http://192.168.7.36:2021/login-manages/tabless/subcailist",
                        type:"post",
                        data:{"tablemenus":tablemenus},
                        contentType:"application/x-www-form-urlencoded",
                        dataType:"json",
                        success:function (data) {
                            if(data.info == "保存成功"){
                                $('.alert2').html('下单成功').addClass('alert-success').show().delay(500).fadeOut();
                                //关闭模态框
                                $("#four").modal("hide");
                                self.closeWin();


                            }else {
                                $('.alert2').html("下单失败，菜品："+data.MenuNames+" 数量过多").addClass('alert-info').show().delay(2500).fadeOut();
                                // alert("下单失败，菜品："+data.MenuNames+"数量过多");
                            }

                        }
                    })
                }
            },
            //结账模态框
            checkOutopen:function (x) {
                var flag = confirm("确认要结账吗？");
                var self = this;
                if(flag){
                    //座号赋值
                    self.menus.tablessId = x.tablessId;
                    var tablemenus =  "tableyd:list"+self.menus.tablessId;
                    //初始化
                    self.tablecailist = [];
                    self.amountall = 0;   //总金额
                    self.vipnum = "";   //会员号
                    self.actualmoney = 0;   //需支付金额
                    self.vipGrade = "空";   //VIP等级
                    self.discount = 1.0;   //折扣
                    self.menulistajaxs(tablemenus);

                    //开启模态框
                    $("#five").modal("show");
                }
            },
            vipdate:function () {   //vip号查询
                var self = this;
                    $.ajax({
                        url:"http://192.168.7.36:2021/login-service/vids/queryLv",
                        type:"get",
                        data: {"tel": self.vipnum},
                        dataType:"json",
                        success:function (map) {
                            if(map.data == "存在"){
                                self.vipGrade = map.lv;
                                self.discount = map.discount;
                                self.actualmoney = self.amountall*self.discount
                            }else {
                                self.vipnum = "";
                                self.vipGrade = "";
                                self.discount = 1;
                                self.actualmoney = self.amountall;
                                $('.alert3').html("该账号不存在").addClass('alert-warning').show().delay(1500).fadeOut();
                            }
                        }
                    })
            },
            checkOut:function () {   //结账操作
                var self = this;
                var flag = true;
                if(self.vipnum == ""){
                    flag = confirm("当前没有输入会员号，确认要结账吗？")
                }
                if(flag){
                    //座号赋值
                    var tablemenus =  "tableyd:list"+self.menus.tablessId;
                    self.vips.tablemenus = tablemenus; //座号
                    self.vips.amountall = self.amountall;//总金额
                    self.vips.vipnum = self.vipnum;//会员号
                    self.vips.actualmoney = self.actualmoney;//需支付金额
                    self.vips.vipGrade = self.vipGrade;//VIP等级
                    self.vips.discount = self.discount; //折扣
                    $.ajax({
                        url:"http://192.168.7.36:2021/login-manages/income/insertOne",
                        type:"post",
                        contentType:"application/x-www-form-urlencoded",
                        data:self.vips,    //座号,折扣
                        dataType:"json",
                        success:function (map) {
                            console.log(map.data)
                            if(map.data == "保存成功"){
                                $('.alert3').html("结账成功").addClass('alert-warning').show().delay(1500).fadeOut();
                                //关闭模态框
                                $("#five").modal("hide")
                                self.loadData();
                            }else {
                                $('.alert3').html("结账失败").addClass('alert-info').show().delay(1500).fadeOut();
                            }
                        }
                    })
                }
            }



        },
        mounted(){
            //运行loadData函数
            this.loadData();
        }
    })



</script>
</html>
